<template>
  <div class="box">
    <van-button type="primary" @click="$router.go(-1)">退回上一页</van-button>
    <van-button @click="toogleDir = !toogleDir">切换方向</van-button>
    <van-divider />
    <!--  -->
    <template v-if="toogleDir">
      <van-swipe class="my-swipe">
        <template v-for="item in bookList">
          <van-swipe-item :key="item.id" v-html="item.content"></van-swipe-item>
        </template>
      </van-swipe>
    </template>
    <!--  -->
    <template v-else>
      <van-swipe
        class="my-swipe"
        style="calc(100vh - 230px);"
        vertical
        indicator-color="white"
      >
        <template v-for="item in bookList">
          <van-swipe-item :key="item.id" v-html="item.content"></van-swipe-item>
        </template>
      </van-swipe>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      toogleDir: true,
    }
  },
  computed: {
    ...mapState(['bookList']),
  },
}
</script>

<style lang="scss" scoped>
.box {
  height: calc(100% - 100px);
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  // line-height: 150px;
  height: calc(100vh - 230px);
  text-align: center;
  background-color: #39a9ed;
}
</style>
